<template>
	<div>
    <slot></slot>
		<div class="top">
			<i class="iconfont iconfanhui main-color pointer margin-r-8" @click.stop="back"></i>
			<contentEdit
				ref="contentEdit"
				class="name opacity80"
				maxlength="20"
				@saveData="saveName"
				@dblclick.native="rename"
				:value="editCondition.filterName"
			>
			</contentEdit>
      							<el-dropdown
								placement="bottom"
								trigger="click"
								@command="editCommand"
							>
							  <i class="iconfont icongengduo-heng margin-l-8 opacity60 pointer"></i>
								<el-dropdown-menu slot="dropdown" class="mp-micro">
                  <el-dropdown-item command="rename">重命名</el-dropdown-item>
                  <el-dropdown-item
										command="my"
										v-if="editCondition.useScope === 2"
									>设为个人筛选条件</el-dropdown-item>
									<el-dropdown-item
										command="common"
										v-if="editCondition.useScope === 1"
									>设为公共筛选条件</el-dropdown-item>
									<el-dropdown-item command="delete">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
		</div>
		<conditionForm
			:fieldsList="filterFieldList || []"
			:conditonList="editCondition.filters"
			class="condition"
			type="filter"
		>
		</conditionForm>
		<div
			class="footer"
			v-if="editCondition.filters && editCondition.filters.length"
		>
			<el-button
				size="small"
				v-if="editCondition.useScope === 1"
				@click.stop="updateFilterInfo"
			>保存条件</el-button>
			<el-button
				type="primary"
				class="fr"
				size="small"
				@click.stop="search"
			>确认</el-button>
		</div>
	</div>

</template>
<script lang="ts">
import { Component, Vue, Ref, Prop } from 'vue-property-decorator';
import conditionForm from './conditionForm.vue';
import contentEdit from './contentEdit.vue';
// eslint-disable-next-line no-restricted-imports
import { trim, flatten } from 'lodash';
@Component({
  components: {
    conditionForm,
    contentEdit
  }
})
export default class extends Vue {
  [x: string]: any;
  @Prop({ default: () => ({}) }) private updateBaseInfo
  @Prop({ default: () => ({}) }) private editCondition
  @Prop({ default: () => ({}) }) private back
  @Prop({ default: () => ([]) }) private filterFieldList
  @Prop({ default: () => ([]) }) private handleCommand
  @Ref() private contentEdit1!: contentEdit
  // 所有条件都必须有businessId才能保存配置
  private get canSave () {
    return !flatten<any>(this.editCondition.filters || []).some((item) => {
      return !item.businessId
    })
  }

  private rename () {
    const contentEdit1 = this.$refs.contentEdit as contentEdit;
    contentEdit1.initData(true);
  }

  private async saveName (value: any) {
    const contentEdit1 = this.$refs.contentEdit as contentEdit;
    contentEdit1.initData(false);
    if (trim(value)) {
      const { id } = this.editCondition;
      this.updateBaseInfo({ id, filterName: value });
    }
  }

  private search () {
    this.$emit('search', this.editCondition)
  }

  private editCommand (type) {
    if (type === 'rename') {
      this.rename()
    } else {
      this.handleCommand(this.editCondition, type)
    }
  }

  private async updateFilterInfo () {
    const { id, filters } = this.editCondition
    if (this.canSave) {
      // await updateFilterInfo({id, filters, screenType: 1});
    } else {
      // 筛选项不能为空
      this.$message.error('筛选项不能为空')
    }
  }
}
</script>
<style lang="stylus" scoped>
	.footer {
		border-bottom 1px solid rgba(0, 0, 0, 0.05)
		padding 16px 0
	}
	.condition.filter {
		flex-shrink 2
		overflow-y auto
		padding 16px 0 8px
		border-bottom 1px solid rgba(0, 0, 0, 0.05)
	}
	.top {
		padding 16px 0 16px
		display flex
		border-bottom 1px solid rgba(0, 0, 0, 0.05)
		.name {
			flex-grow 1
			height 22px
			line-height 22px
		}
	}
</style>
